<template>
  <div class="collaboration">
    <div class="collaboration-header">
      <h2>协作功能</h2>
      <el-button type="primary" @click="showInviteDialog">邀请协作者</el-button>
    </div>
    
    <div class="collaboration-content">
      <div class="collaborators-list">
        <h3>协作者列表</h3>
        <el-table :data="collaborators" style="width: 100%">
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="role" label="角色" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="scope.row.status === '在线' ? 'success' : 'info'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button 
                type="danger" 
                size="small" 
                @click="removeCollaborator(scope.row)"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="comments-section">
        <h3>评论与反馈</h3>
        <div class="comments-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <span class="comment-author">{{ comment.author }}</span>
              <span class="comment-time">{{ comment.time }}</span>
            </div>
            <div class="comment-content">{{ comment.content }}</div>
          </div>
        </div>
        
        <div class="comment-input">
          <el-input
            v-model="newComment"
            type="textarea"
            :rows="3"
            placeholder="添加评论..."
          />
          <el-button type="primary" @click="addComment">发送</el-button>
        </div>
      </div>
      
      <div class="version-history">
        <h3>版本历史</h3>
        <el-timeline>
          <el-timeline-item
            v-for="version in versions"
            :key="version.id"
            :timestamp="version.time"
            :type="version.type"
          >
            {{ version.description }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    
    <!-- 邀请协作者对话框 -->
    <el-dialog
      v-model="inviteDialogVisible"
      title="邀请协作者"
      width="500px"
    >
      <el-form :model="inviteForm" label-width="100px">
        <el-form-item label="邮箱">
          <el-input v-model="inviteForm.email" placeholder="请输入邮箱地址" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="inviteForm.role" placeholder="选择角色">
            <el-option label="编辑" value="editor" />
            <el-option label="审阅者" value="reviewer" />
            <el-option label="评论者" value="commenter" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="inviteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sendInvite">发送邀请</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const collaborators = ref([
  { name: '张三', role: '编辑', status: '在线' },
  { name: '李四', role: '审阅者', status: '离线' },
  { name: '王五', role: '评论者', status: '在线' }
])

const comments = ref([
  {
    id: 1,
    author: '张三',
    time: '2024-03-20 10:30',
    content: '这个场景的描写很生动，建议再增加一些细节。'
  },
  {
    id: 2,
    author: '李四',
    time: '2024-03-20 11:15',
    content: '同意，可以补充一些环境描写。'
  }
])

const versions = ref([
  {
    id: 1,
    time: '2024-03-20 14:30',
    type: 'primary',
    description: '创建初始版本'
  },
  {
    id: 2,
    time: '2024-03-20 15:45',
    type: 'success',
    description: '添加场景描写'
  },
  {
    id: 3,
    time: '2024-03-20 16:20',
    type: 'warning',
    description: '修改人物对话'
  }
])

const inviteDialogVisible = ref(false)
const inviteForm = ref({
  email: '',
  role: ''
})

const newComment = ref('')

const showInviteDialog = () => {
  inviteDialogVisible.value = true
}

const sendInvite = () => {
  if (!inviteForm.value.email || !inviteForm.value.role) {
    ElMessage.warning('请填写完整信息')
    return
  }
  // 模拟发送邀请
  ElMessage.success('邀请已发送')
  inviteDialogVisible.value = false
}

const removeCollaborator = (collaborator) => {
  ElMessageBox.confirm(
    `确定要移除协作者 ${collaborator.name} 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 模拟移除协作者
    ElMessage.success('已移除协作者')
  })
}

const addComment = () => {
  if (!newComment.value) {
    ElMessage.warning('请输入评论内容')
    return
  }
  // 模拟添加评论
  comments.value.push({
    id: comments.value.length + 1,
    author: '当前用户',
    time: new Date().toLocaleString(),
    content: newComment.value
  })
  newComment.value = ''
}
</script>

<style scoped>
.collaboration {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.collaboration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.collaboration-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.collaborators-list,
.comments-section,
.version-history {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.comments-list {
  margin: 16px 0;
  max-height: 300px;
  overflow-y: auto;
}

.comment-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #666;
}

.comment-content {
  color: #333;
}

.comment-input {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.comment-input .el-button {
  align-self: flex-end;
}
</style> 